<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>直播</title>
</head>
<body>
 <div class="mainContainer" >
        <video id="videoElement" controls autoplay width="680"  muted="muted" height="370"></video>
    </div>
 <br>
    
 <script src="flv.js" type="text/javascript" ></script>
   <script>
   
   function getQueryVariable(variable){
          var query = window.location.search.substring(1);
          var vars = query.split("&");
          for (var i=0;i<vars.length;i++) {
                  var pair = vars[i].split("=");
                  if(pair[0] == variable){return pair[1];}
          }
          return(false);
   }
      var vid=getQueryVariable("vid")
        var flvjs = window.flvjs
        var videoElementzzz  = document.getElementById('videoElement');
      
    
        var flvPlayer;
     
        var config={
        	  enableWorker: true,
              enableStashBuffer: false,
              stashInitialSize: 128,
              lazyLoadMaxDuration: 3*60,
              fixAudioTimestampGap: false,
              autoCleanupSourceBuffer: true,
              
              // 如果是Android浏览器，建议enableDurationMonitor设置为false
              enableDurationMonitor: true,    // true表示监测当前直播流延时，当发现延时过大时，主动追赶
              enableVideoFrozenMonitor: true, // 监测视频解码是否停滞（画面卡停），当因为某些原因导致无法解码时，将上报VIDEO_FROZEN事件，收到后建议重拉流
               videoStateMonitorInterval: 1000, // 多长时间（毫秒）检查一次视频状态（延时、停滞）

              // 针对手机浏览器上对MSE以及网络连接更加容易不稳定，建议将maxDurationGap设置高一点，比如2.5、3、3.5，否则可能会频繁追赶延时导致画面卡顿
               lowLatencyThreshold: 1.5,        // 延迟追赶判断阈值下限
               highLatencyThreshold: 3,        // 延迟追赶判断阈值上限
              decreaseDurationStep: 2,       // 每次追赶至缓冲区末尾之前的多少秒
              // frozenTimesThreshold: 5,         // 解码停滞次数达到此阈值，上报VIDEO_FROZEN事件。注意如果设置过小的阈值，当推流端关闭摄像头后可能会频繁触发VIDEO_FROZEN事件

              // webrtc合流未能给cdn推送正确的视频分辨率信息，导致从MetaData/AVCDecoderConfigurationRecord中无法拿到正确的视频分辨率
              // 在内核低于Chromium 70的浏览器（如360浏览器、搜狗浏览器、PC微信内嵌浏览器等）中
              // 如果传递不对的视频分辨率，将会导致画面放大显示异常，因此，强行设置一个最大的视频宽高信息，来避免此问题
              // 如果是Safari浏览器，enableConstVideoViewSize建议设置为false
              // enableConstVideoViewSize: false, 
              // constVideoViewWidth: 1920,
              // constVideoViewHeight: 1080,

              // enableAudioGain: false,
               //audioGainLevel: gain_level,
        }
        var mediaDataSource={
        		   type: 'flv',
                   isLive : true,
                   url: 'http://47.92.196.10:8080/live/1.flv',//改为自己服务的地址
        }
        if (flvjs.isSupported()) {
        	
             flvPlayer = flvjs.createPlayer(mediaDataSource,config);
             
             
            flvPlayer.attachMediaElement(videoElementzzz );
            
            videoElementzzz.addEventListener('progress', function() {
                if (this.buffered.length > 0) {
                    const diff = this.buffered.end(0) - this.currentTime
                    if (diff > 1.5) {
                    	this.currentTime = this.buffered.end(0) - 0.01
                    }
                  }
               
            }); 
            
            
            flvPlayer.load(); //加载
            flvPlayer.play();
           // re();
            
        }
        function re(){
        	setInterval(() => {
                if (videoElementzzz.buffered.length > 0) {
                  const diff = videoElementzzz.buffered.end(0) - videoElementzzz.currentTime
                  if (diff > 0.5) {
                	  videoElementzzz.currentTime = videoElementzzz.buffered.end(0) - 0.01
                  }
                }
              }, 10000)
        }
        
        function flv_start() {
        	flvPlayer.play();
        }
        function flv_pause() {
        	flvPlayer.pause();
        }
        function flv_destroy() {
        	flvPlayer.pause();
        	flvPlayer.unload();
        	flvPlayer.detachMediaElement();
        	flvPlayer.destroy();
        	flvPlayer = null;
        }
        flv_start();
        
        
        
        
        
    </script>
</body>
</html>